<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Socket</title>
		<script
  src="http://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
        <script type="text/javascript">
            var websocket;
            function cnt(){
				cnt0($('#ip').val(),$('#port').val());
			}
			function recnt(){
				document.getElementById('respMessage').value = '';
				cnt();
			}
            function cnt0(ip,port){
					//如果浏览器支持WebSocket
				if(window.WebSocket){  
					websocket = new WebSocket("ws://"+ip+':'+port);  //获得WebSocket对象
					
					//当有消息过来的时候触发
					websocket.onmessage = function(event){ 
					var c=event.data;
					c=c.replace(/\\/g,"");
						var respMessage = document.getElementById("respMessage");
						respMessage.value = respMessage.value + "\n" + c;
						
					}
					
					//连接关闭的时候触发
					websocket.onclose = function(event){
						var respMessage = document.getElementById("respMessage");
						respMessage.value = respMessage.value + "\n断开连接";
						
					}
					
					//连接打开的时候触发
					websocket.onopen = function(event){
						var respMessage = document.getElementById("respMessage");
						respMessage.value = "建立连接";
					}
				}else{
					alert("浏览器不支持WebSocket");
				}
			}
            
            function sendMsg(msg) { //发送消息 
                if(window.WebSocket){
                    if(websocket.readyState == WebSocket.OPEN) { //如果WebSocket是打开状态
                        websocket.send(msg); //send()发送消息
                    }
                }else{
                    return;
                }
            }
			function login(){
				var msg={  
						 code:10001,
						 type:1,
						 loginName:$('#loginName').val(),
						 password:$('#password').val(),
					};
				 msg=JSON.stringify(msg);
				sendMsg(msg);
			}
			function pullSys(){
			var msg={  
						 code:10003,
						 type:1,
						  
					};
			msg=JSON.stringify(msg);
			sendMsg(msg);
			}
			function createRoom(){
			var msg={  
						 code:20001,
						 type:2,
						 gameId:1001
					};
			msg=JSON.stringify(msg);
			sendMsg(msg);	
			}
			function join(){
			var msg={  
						 code:20002,
						 type:2,
						 roomId:$('#roomId').val(),
						 password:$('#password0').val()
						  
					};
			msg=JSON.stringify(msg);
			sendMsg(msg);
			}
        </script>
    </head>
<body>
<center>
    <form onsubmit="return false">
		ip:<input id="ip" value="127.0.0.1"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;port:<input id="port" value="8776"/>
		<button onclick="cnt()">连接</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button onclick="recnt()">重新连接</button>
		<br><br>
		loginName:<input  id="loginName"> password:<input  id="password"><button onclick="login()">登录</button><br><br>
		<button onclick="pullSys()">获取系统信息</button> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button onclick="createRoom()">创建房间</button><br><br>
		 roomId:<input  id="roomId"> password:<input  id="password0"><button onclick="join()">加入房间</button><br><br>
		 
		<br>
        <textarea style="width: 800px; height: 50px;" name="message"></textarea>
        <input type="button" onclick="sendMsg(this.form.message.value)" value="发送"><br>
        <h3>信息</h3>
        <textarea style="width: 800px; height: 640px;" id="respMessage"></textarea>
        <input type="button" value="清空" onclick="javascript:document.getElementById('respMessage').value = ''">
    </form>
	</center>
</body>
</html>